<template>
  <div class="info" v-loading="loading">
    <el-card class="info-title" shadow="none">
      <div class="left">产品详情</div>
    </el-card>
    <div class="info-content">
      <el-card class="left" shadow="none">
        <div class="left-top">
          <div>编号：{{ product?product.product_number: "" }}</div>
          <el-button size="mini" type="primary" @click="edit">编辑</el-button>
        </div>
        <div class="left-bottom-info">
          <div>产品信息</div>
          <div>出厂编号：{{ product?product.name: "" }}</div>
          <div>产品型号：{{ product ? product.type?product.type.name:'' : '' }}</div>
          <div>
            出厂报告：
            <a  v-if="product?product.attachment_url:false" :href="product?product.attachment_url?product.attachment_url:'':''" target="_blank" style="cursor: pointer;" :download="product.attachment_url?product.attachment_url:''">
              附件
            </a>
            <span v-else>暂无附件</span>
          </div>
          <div>安装地址：{{ product?product.province_name+product.city_name+product.county_name+product.install_address: "" }}</div>
          <div>购买日期：{{ product?product.date_buy : "" }}</div>
          <div>联系人：{{ product ? product.customer.users?product.customer.users[0]? product.customer.users[0].name:'' : '':'' }}</div>
          <div>联系电话：{{ product? product.customer.users?product.customer.users[0]?product.customer.users[0].phone :'': '':'' }}</div>
        </div>
        <div class="left-bottom-info">
          <div>保质信息</div>
          <div>质保开始日期：{{ product?product.warranty_start : "" }}</div>
          <div>质保结束日期：{{ product?product.warranty_end : "" }}</div>
          <div>质保状态：{{ product?product.warranty_status_title : "" }}</div>
        </div>
        <div class="left-bottom-info-bottom">
          <div>二维码</div>
          <div>
            <img v-if="product?product.qrcode:''" :src=" product?product.qrcode.url : ''" alt="" style="width: 150px;height: 150px;">
            <span v-else>
              <el-button size="mini" type="primary" @click="openCodeEdit">请关联产品</el-button>
            </span>
          </div>
        </div>
      </el-card>
      <el-card class="right" shadow="none">
        <el-tabs v-model="tabsActive">
<!--          <el-tab-pane label="动态信息" name="dtxx">动态信息</el-tab-pane>-->
<!--          <el-tab-pane label="质保变更" name="zbbg">客户项目</el-tab-pane>-->
<!--          <el-tab-pane label="配件清单" name="bjqd">客户产品</el-tab-pane>-->
<!--          <el-tab-pane label="工单信息" name="gdxx">工单信息</el-tab-pane>-->
<!--          <el-tab-pane label="合同信息" name="gtxx">合同信息</el-tab-pane>-->
          <el-tab-pane label="产品类型" name="cplx">
            <product-type :productType="productType"></product-type>
          </el-tab-pane>
<!--          <el-tab-pane label="计划任务" name="jhrw">计划任务</el-tab-pane>-->
        </el-tabs>
      </el-card>
    </div>

    <CodeEdit ref="CodeEdit" :data="current" :visible.sync="codeEdit" @editQrCode="editQrCode" />
    <product-form ref="productFormRef" />
  </div>
</template>

<script>
import CodeEdit from "../compenents/code-edit.vue"
import productForm from "@/views/product/product/compenents/product-form.vue";
import ProductType from "@/views/product/product/info/compenents/productType.vue";

export default {
  name: "productInfo",
  components: {
    ProductType,
    CodeEdit,
    productForm
  },
  watch:{
    //监听路由变化更新本地数据
    $route(){
      if(this.$route.path==='/product/product/info'){
        this.id= this.$route.query.id; //获取传来的参数
        this.loadData()
      }
    }
  },
  data() {
    return {
      /*产品类别*/
      productType:{},
      //组件激活
      key: null,
      showEdit: false,
      id: 0,
      tabsActive: "cplx",
      loading: false,
      product: {
        customer: {},
        qrcode: {},
      },
      // 二维码是否显示编辑弹窗
      codeEdit: false,
      current: null
    }
  },
  created() {
    this.id = this.$route.query.id * 1;
  },
  mounted() {
     this.loadData();
  },
  methods: {
    editQrCode(value, id) {
      this.loading=true
      this.$http.put('/qr_code/' + id, { product_id: value }).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.$refs.CodeEdit.code_name = "";
          this.$refs.CodeEdit.updateVisible(false);
          this.loading=false
          this.loadData();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.loading=false
        this.$message.error(e.message);
      });
    },
    edit() {
      this.current = this.product;
      this.$refs.productFormRef.showDialog(this.current ? "edit" : "add", this.current);
    },
    loadData() {
      this.loading=true
      // this.loading = true;
      this.$http.get(`products/${this.id}`).then((res) => {
        this.product = res.data.data
        this.productType=res.data.data.type
        // this.loading = false;
        this.loading=false
      });

    },
    openCodeEdit() {
      this.$refs.CodeEdit.product_id = this.id;
      this.$refs.CodeEdit.isProduct = true;
      this.codeEdit = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.listItem {
  display: flex;
  //width: 100%;
  overflow: hidden;
}

.info {
  width: 96%;
  margin: 10px auto 0;

  .info-title {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;

    .left {
      font-size: 21px;
      color: rgb(0 0 0 /.8);
      font-weight: 600;
    }
  }

  .info-content {
    height: calc(100vh - 190px);
    display: flex;
    justify-content: space-between;

    .el-card + .el-card {
      margin-top: 0;
    }

    .left {
      width: 30%;
      box-sizing: border-box;
      overflow: auto;

      .left-top {
        font-size: 14px;
        color: rgb(0 0 0 /.8);
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 2px solid #eeeeee;
        box-sizing: border-box;
      }

      .left-bottom-info {
        font-size: 14px;
        border-bottom: 2px solid #eeeeee;

        div:first-child {
          font-weight: 600;
        }

        div {
          padding: 10px 5px;
        }
      }

      .left-bottom-info-bottom {
        font-size: 14px;

        div:first-child {
          font-weight: 600;
        }

        div {
          padding: 10px 5px;
        }
      }
    }

    .right {
      width: 68%;
    }
  }
}
</style>
